<!--
 * @Author: hifishroom
 * @Date: 2021-08-26 14:14:29
 * @LastEditTime: 2021-08-26 14:14:29
 * @FilePath: \backstage\src\views\background\childsContent\information\Elevator.vue
-->

<template>
  <div class="table">
    <div class="list">
      <h1>电梯信息列表</h1>
      <div class="change">
        <div class="search">
          <div class="district">
            <input type="text" />
            <div class="iconfont">&#xe60a;</div>
          </div>
          <button>搜索</button>
        </div>
        <div class="btn">
          <button @click="additional">新增</button>
        </div>
      </div>
      <div class="cals">
        <div class="title layout">
          <div v-for="item in title" :key="item">{{ item }}</div>
        </div>
        <div class="contain">
          <!-- v-for循环 -->
          <div
            class="message layout"
            v-for="(item, index) in Get_Elevator.list"
            :key="item.id"
          >
            <div>{{ item.id }}</div>
            |
            <div>{{ item.buildingId }}</div>
            |
            <div>{{ item.elevatorNo }}</div>
            |
            <div>{{ item.elevatorModel }}</div>
            |
            <div>{{ item.capacityValue }}</div>
            |
            <div>{{ item.installYear }}</div>
            |
            <div>{{ item.updateTime }}</div>
            |
            <div>{{ item.updateBy }}</div>
            |
            <div>{{ item.remark }}</div>
            |
            <div class="amend">
              <div class="iconfont" @click="detailedness(item.id)">
                &#xe604;
              </div>
              <div class="iconfont" @click="edit(item.id)">&#xe635;</div>
              <div class="iconfont" @click="detele(item.id, index)">
                &#xe673;
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <button @click="previous()">&lt;</button>
        <div
          class="page"
          v-for="(item, index) in total"
          :key="index"
          @click="curPage(item)"
        >
          <a :class="pageNum === item ? 'active' : ''">{{ item }}</a>
        </div>
        <button @click="next()">&gt;</button>
      </div>
    </div>
    <!-- 详情页 -->
    <div class="circumstance" v-show="detailedness_page">
      <div class="base">
        <h1>电梯基础信息</h1>
        <div class="basic">
          <div class="info">
            <div class="coding arrange">
              <label for="">楼栋编号:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.buildingNo"
              />
            </div>
            <div class="tender arrange">
              <label for="">电梯编号:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.elevatorNo"
              />
            </div>

            <div class="designation arrange">
              <label for="">电梯型号:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.elevatorModel"
              />
            </div>

            <div class="genre arrange">
              <label for="">荷载量(kg):</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.capacityValue"
              />
            </div>

            <div class="establish arrange">
              <label for="">安装年份:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.installYear"
              />
            </div>

            <div class="creator arrange">
              <label for="">创建时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.createTime"
              />
            </div>

            <div class="proportion arrange">
              <label for="">创建人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.createBy"
              />
            </div>
            <div class="adlit arrange">
              <label for="">修改时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.updateTime"
              />
            </div>
            <div class="etc arrange">
              <label for="">最后更新人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.updateBy"
              />
            </div>

            <div class="remark arrange">
              <label for="">备注:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurElevator.remark"
              />
            </div>
          </div>
        </div>
        <div class="indro ">
          <p>营房简介:</p>
          <textarea
            type="text"
            readonly="readonly"
            :value="Get_CurElevator.intro"
          ></textarea>
        </div>
        <div class="btn">
          <button @click="go_back">
            返回
          </button>
        </div>
      </div>
    </div>
    <!-- 编辑页 -->
    <div class="remove" v-show="edit_page">
      <div class="base">
        <h1>电梯基础信息</h1>
        <div class="basic">
          <div class="info">
            <div class="coding arrange">
              <label for="">楼栋编号:</label>
              <input type="text" v-model="Get_CurElevator.buildingNo" />
            </div>
            <div class="tender arrange">
              <label for="">电梯编号:</label>
              <input type="text" v-model="Get_CurElevator.elevatorNo" />
            </div>

            <div class="designation arrange">
              <label for="">电梯型号:</label>
              <input type="text" v-model="Get_CurElevator.elevatorModel" />
            </div>

            <div class="genre arrange">
              <label for="">荷载量(kg):</label>
              <input type="text" v-model="Get_CurElevator.capacityValue" />
            </div>

            <div class="establish arrange">
              <label for="">安装年份:</label>
              <input type="text" v-model="Get_CurElevator.installYear" />
            </div>

            <div class="creator arrange">
              <label for="">创建时间:</label>
              <input type="text" v-model="Get_CurElevator.createTime" />
            </div>

            <div class="proportion arrange">
              <label for="">创建人:</label>
              <input type="text" v-model="Get_CurElevator.createBy" />
            </div>
            <div class="adlit arrange">
              <label for="">修改时间:</label>
              <input type="text" v-model="Get_CurElevator.updateTime" />
            </div>
            <div class="etc arrange">
              <label for="">最后更新人:</label>
              <input type="text" v-model="Get_CurElevator.updateBy" />
            </div>

            <div class="remark arrange">
              <label for="">备注:</label>
              <input type="text" v-model="Get_CurElevator.remark" />
            </div>
          </div>
        </div>
        <div class="indro ">
          <p>营房简介:</p>
          <textarea type="text" v-model="Get_CurElevator.intro"></textarea>
        </div>
        <div class="btn">
          <button @click="go_back">
            返回
          </button>
          <button @click="editInfo">
            提交
          </button>
        </div>
      </div>
    </div>
    <!-- 蒙层 -->
    <div class="mask" v-show="addInput">
      <!-- 电梯 -->
      <div class="quarter">
        <h1>电梯信息完善</h1>
        <div class="inputArea">
          <div class="location layout">
            <label for="">楼栋编号</label>
            <input type="text" class="" v-model="buildingNo" />
          </div>

          <div class="barrack layout">
            <label for="">电梯型号</label>
            <input type="text" class="" v-model="elevatorModel" />
          </div>
          <div class="photo layout">
            <label for="">荷载量</label>
            <input type="type" class="" v-model="capacityValue" />
          </div>
          <div class="build layout">
            <label for="">安装年份</label>
            <input type="date" class="" v-model="installYear" />
          </div>
          <div class="createBy layout">
            <label for="">创建人</label>
            <input type="date" class="" v-model="createBy" />
          </div>
          <div class="updateBy layout">
            <label for="">更新人</label>
            <input type="date" class="" v-model="updateBy" />
          </div>
          <div class="update layout">
            <label for="">更新时间</label>
            <input type="date" class="" v-model="updateTime" />
          </div>
          <div class="buildTime layout">
            <label for="">创建时间</label>
            <input type="date" class="" v-model="createTime" />
          </div>
          <div class="indro">
            <p>设备说明</p>
            <textarea v-model="intro"></textarea>
          </div>
          <div class="btn">
            <button @click="go_back">返回</button>
            <button @click="commit">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "BasicInformation",
  data() {
    return {
      title: [
        "id",
        "楼栋编号",
        "电梯编号",
        "电梯型号",
        "荷载量(kg)",
        "安装年份",
        "修改时间",
        "最后更新人",
        "备注",
        "操作"
      ],
      detailedness_page: false, //详情页显示
      edit_page: false, //编辑页显示
      addInput: false, // 新增
      pageNum: 1,
      pageSize: 8,
      total: 1, //总页数
      search: "",



      id: "",
      buildingId: "",
      buildingNo: "",
      elevatorNo: "",
      elevatorModel: "",
      capacityValue: "",
      installYear: "",
      intro: "",
      createBy: "",
      updateBy: "",
      updateTime: "",
      createTime: "",
    };
  },
  methods: {
    // 详情页
    detailedness(id) {
      this.detailedness_page = !this.detailedness_page;
      this.Get_Elevator_CurInfo(id);
    },

    // 编辑页
    edit(id) {
      this.edit_page = !this.edit_page;
      this.Get_Elevator_CurInfo(id);
    },
    // 编辑信息
    editInfo() {
      this.Edit_Elevator_Info({
        buildingId: this.Get_CurElevator.buildingId,
        buildingNo: this.Get_CurElevator.buildingNo,
        elevatorNo: this.Get_CurElevator.elevatorNo,
        elevatorModel: this.Get_CurElevator.elevatorModel,
        capacityValue: this.Get_CurElevator.capacityValue,
        installYear: this.Get_CurElevator.installYear,
        intro: this.Get_CurElevator.intro,
        createBy: this.Get_CurElevator.createBy,
        updateBy: this.Get_CurElevator.updateBy,
        updateTime: this.Get_CurElevator.updateTime,
        createTime: this.Get_CurElevator.createTime,
        id: this.Get_CurElevator.id
      });
    },
    // 删除当前
    detele(id, index) {
      console.log("detele");
      this.Del_Elevator_Info(id);
      this.Get_Elevator.list.splice(index, 1);
    },
    // 详情 编辑返回
    go_back() {
      this.$router.go(0);
    },
    additional() {
      this.addInput = true;
    },
    // 新增-提交
    commit() {
      this.Inc_Elevator_Info({
        buildingId: this.buildingId,
        buildingNo: this.buildingNo,
        elevator: this.elevator,
        elevatorModel: this.elevatorModel,
        capacityValue: this.capacityValue,
        installYear: this.installYear,
        intro: this.intro,
        createBy: this.createBy,
        updateBy: this.updateBy,
        updateTime: this.updateTime,
        createTime: this.createTime
      });
    },
    // 当前页
    curPage(i) {
      this.pageNum = i;
    },
    // 分页-上一页
    previous() {
      if (this.pageNum <= 1) {
        this.pageNum = 1;
      } else {
        return this.pageNum - 1;
      }
    },
    // 分页-下一页
    next() {
      if (this.pageNum >= this.total) {
        this.pageNum = this.total;
      } else {
        return this.pageNum + 1;
      }
    },
    ...mapActions([
      "Get_elevator_Info",
      "Get_Elevator_CurInfo",
      "Del_Elevator_Info",
      "Inc_Elevator_Info",
      "Edit_Elevator_Info"
    ])
  },
  computed: {
    Get_Elevator() {
      return this.$store.state.elevatorInfo;
    },
    Get_CurElevator() {
      return this.$store.state.currentElevatorInfo;
    },
    Del_Elevator() {
      return this.$store.state.deleteElevatorInfo;
    },
    Inc_Elevator() {
      return this.$store.state.increatElevatorInfo;
    },
    Del_Elevator() {
      return this.$store.state.editElevatorInfo;
    }
  },
  mounted() {
    this.Get_elevator_Info({ pageNum: this.pageNum, pageSize: this.pageSize });
  },
  watch: {
    Get_Elevator(newInfo, oldInfo) {
      console.log(newInfo, oldInfo);
      this.total = Math.ceil(newInfo.total / this.pageSize);
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  h1 {
    text-align: center;
    background-color: #fff;
    padding: 0.8rem 0;
    border-radius: 5px;
  }
  .change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    padding: 0.5rem 0.5rem;
    // 搜索框
    .search {
      display: flex;
      gap: 20px;
      align-items: center;
      .district {
        display: flex;
        border: 1px solid #000;
        align-items: center;
        border-radius: 15px;
        padding: 0.2rem;
        input {
          outline-color: #fff;
          border: 0;
        }
      }
      select {
        padding: 0.5rem;
      }
    }
    .btn {
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
  .cals {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .layout {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0.8rem 0;
    }
    .title {
      background-color: rgb(242, 245, 249);
    }
    .contain {
      width: 100%;
      .amend {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }
  }
  // 分页
  .paging {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    button {
      padding: 5px 10px;
    }
    a {
      text-decoration: none;
    }
  }
}
// 详情 编辑
.circumstance,
.remove {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(74, 139, 139);
  .base {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    margin: 0 auto;
    background-color: rgb(176, 238, 238);
    padding: 1rem;
    h1 {
      text-align: center;
    }
    .basic {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      .info {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        .arrange {
          width: 40%;
          display: flex;
          justify-content: space-between;
          label {
            width: 35%;
            text-align: right;
          }
          input {
            width: 60%;
          }
        }
      }
      .image {
        width: 20%;
        border: 1px solid #000;
        height: 100px;
      }
    }
    .indro {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
}
// 蒙层
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgb(231, 209, 209);
  .quarter {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    h1 {
      text-align: center;
    }
    .inputArea {
      display: flex;
      flex-direction: column;
      gap: 20px;
      .layout {
        width: 50%;
        display: flex;
        gap: 15px;
        label {
          width: 15%;
        }
        input,
        select {
          width: 40%;
        }
      }
      .indro {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
      }
    }
  }
}
</style>
